<template>
    <view class="gjl-components">
        <view class="components-inner">
            <view class="slide-bg" :style="{backgroundColor: bgColor,borderRadius: bgBorderRadius}">
                <view class="slide-inner" :style="{width: value + '%',backgroundColor: activeColor,height: activeHeight + '%'}">
                    
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            activeColor:{
                type: String,
                default: '#2BA8FC'
            },
            activeHeight: {
                type: Number,
                default: 120
            },
            bgBorderRadius:{
                type: String,
                default: '119rpx'
            },
            bgColor: {
                type: String,
                default: '#F0F0F0'
            },
            value: {
                type: Number,
                default: 0
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-components{
        width: 100%;
        height: 100%;
        .components-inner{
            width: 100%;
            height: 100%;
            .slide-bg{
                overflow: hidden;
                width: 100%;
                height: 100%;
                position: relative;
                .slide-inner{
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }
        }
    }
</style>